// 1. 导入lazy Suspense 
import { lazy, Suspense } from 'react';
import { Navigate } from "react-router-dom";
import Home from "../pages/Home";
import News from "../pages/News";

const About = lazy(() => import('../pages/About'));
const Message = lazy(() => import('../pages/Message'));
const Detail = lazy(()=>import('../pages/Detail'))

function load(Com) {
    return <Suspense fallback={<h3>正在加载中....</h3>}>
        <Com />
    </Suspense>
}
const routes = [
    {
        path: '/home',
        element: <Home />,
        children: [
            {
                path: 'news',
                element: <News />
            },
            {
                path: 'message',
                element: load(Message),
                children:[
                    {
                        // path参数的配置，需要占位符
                        path:'detail/:id/:title',
                        element:load(Detail)
                    }
                ]
            },
            {
                index: true,
                element: <Navigate to='news' />
            }
        ]
    },
    {
        path: '/about',
        element: load(About)
    },
    {
        path: '/',
        element: <Navigate to='/home' />
    }
]
export default routes;